<template>
  <div class="w-full flex flex-col content relative overflow-x-auto">
    <div id="anchor1" ref="anchor1Ref" class="absolute" style="top: 0"></div>
    <div id="anchor21" ref="anchor21Ref" class="absolute" style="top: 680px"></div>
    <div id="anchor22" ref="anchor22Ref" class="absolute" style="top: 2200px"></div>
    <div id="anchor23" ref="anchor23Ref" class="absolute" style="top: 2700px"></div>
    <div id="anchor3" ref="anchor3Ref" class="absolute" style="top: 3500px"></div>
    <header class="w-full flex flex-justify-center fixed">
      <div class="flex justify-between grid-items-center box-border">
        <div class="flex text-start flex-items-center">
          <img src="@/assets/images/logo.png" width="90" height="22" @click="select('1', ['1'])" />
          <el-menu
            :ellipsis="false"
            :default-active="activeIndex"
            class="my-el-menu"
            mode="horizontal"
            @select="select"
          >
            <el-menu-item index="1">首页</el-menu-item>
            <el-sub-menu index="2">
              <template #title>服务介绍</template>
              <el-menu-item index="2-1">PMS酒店管理系统</el-menu-item>
              <el-menu-item index="2-2">CRS中央预订系统</el-menu-item>
              <el-menu-item index="2-3">增值服务</el-menu-item>
            </el-sub-menu>
            <el-menu-item index="3">关于我们</el-menu-item>
          </el-menu>
        </div>
        <div class="flex text-end">
          <a href="https://pms.whalepms.cn" target="_blank">
            <img class="v-top" src="@/assets/images/icons/pms-icon.png" width="16" height="16" />鲸哲PMS登录
          </a>
          <span></span>
          <span><img class="v-top" src="@/assets/images/icons/tel-icon.png" width="16" height="16" />4000-567-000</span>
          <a
            class="ml-2"
            href="https://1332550.s4.udesk.cn/im_client/?web_plugin_id=4398&group_id=4476"
            target="_blank"
          >
            <img class="v-top" src="@/assets/images/icons/kefu.png" width="16" height="16" />在线客服
          </a>
        </div>
      </div>
    </header>
    <div class="business business1 relative">
      <img class="absolute" src="@/assets/images/business/business1-img.png" height="709" />
    </div>
    <div class="business business2">
      <img src="@/assets/images/business/business2-img.png" height="465" />
    </div>
    <div class="business business3">
      <img src="@/assets/images/business/business3-img.png" height="456" />
    </div>
    <div class="business business4">
      <img src="@/assets/images/business/business4-img.png" height="416" />
    </div>
    <div class="business business5">
      <img src="@/assets/images/business/business5-img.png" height="545" />
    </div>
    <div class="business business6 flex flex-justify-center">
      <div class="flex flex-justify-center flex-col">
        <span>增值服务</span>
        <span>多元化平台赋能 帮您轻松实现创收增效</span>
        <Swiper></Swiper>
      </div>
    </div>
    <div class="business business7">
      <img src="@/assets/images/business/business7-img.png" height="480" />
    </div>
    <div class="business business8">
      <img src="@/assets/images/business/business8-img.png" height="595" />
    </div>
    <footer class="flex flex-justify-center flex-items-center flex-col">
      <!-- <div class="flex justify-between grid-items-end box-border">
        <div class="flex flex-col text-start">
          <span>联系我们</span>
          <span>上海珞瑾数据信息有限公司</span>
          <span>客服：4000-567-000</span>
          <span>地址：上海市黄浦区新开河路北外滩SOHO A座5层</span>
        </div>
        <div class="flex flex-col text-end">
          <a href="https://beian.miit.gov.cn/" target="blank">
            <span>沪ICP备20023372号-2</span>
          </a>
          <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31010102006934" target="blank">
            <img class="v-top" src="@/assets/images/beian.png" width="14" />&nbsp;
            <span>沪公网安备 31010102006934号</span>
          </a>
        </div>
      </div> -->
      <span>上海珞瑾数据信息有限公司（上海市黄浦区新开河路北外滩SOHO A座5层）</span>
      <span>
        <a class="link" href="https://beian.miit.gov.cn/" target="blank">
          <span>沪ICP备20023372号-2</span>
        </a>
        &nbsp;
        <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31010102006934" target="blank">
          <!-- <img class="v-top" src="@/assets/images/beian.png" width="14" />&nbsp; -->
          <span>沪公网安备 31010102006934号</span>
        </a>
      </span>
    </footer>
  </div>
</template>

<script setup lang="ts">
import Swiper from '@/components/Swiper.vue'

const activeIndex = ref('1')
const anchor1Ref = ref<any>(null)
const anchor21Ref = ref<any>(null)
const anchor22Ref = ref<any>(null)
const anchor23Ref = ref<any>(null)
const anchor3Ref = ref<any>(null)

const select = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
  switch (key) {
    case '1':
      anchor1Ref.value.scrollIntoView({ behavior: 'smooth' })
      break
    case '2-1':
      anchor21Ref.value.scrollIntoView({ behavior: 'smooth' })
      break
    case '2-2':
      anchor22Ref.value.scrollIntoView({ behavior: 'smooth' })
      break
    case '2-3':
      anchor23Ref.value.scrollIntoView({ behavior: 'smooth' })
      break
    case '3':
      anchor3Ref.value.scrollIntoView({ behavior: 'smooth' })
      break
    default:
      break
  }
}
</script>

<style lang="scss" scoped>
.content {
  background: #ffffff;
  min-width: 1014px;
  header {
    z-index: 100;
    height: 50px;
    background: linear-gradient(180deg, rgba(44, 115, 199, 0.7) 0%, rgba(65, 131, 204, 0.7) 100%);
    & > div {
      width: 1014px;
      padding: 0 16px;
      & > div {
        &:last-child {
          & > span,
          & > a {
            font-size: 14px;
            font-family:
              PingFangSC-Semibold,
              PingFang SC;
            font-weight: 600;
            color: #ffffff;
            line-height: normal;
            &:nth-child(2) {
              width: 1px;
              height: 20px;
              background: #ffffff;
              margin: 0 10px;
            }
            & > img {
              margin-right: 6px;
              margin-top: 2px;
            }
          }
        }
      }
    }
  }
  .business {
    img {
      width: 1014px;
    }
    &.business1 {
      height: 540px;
      background: url('@/assets/images/business/business1-bg.png') no-repeat;
      background-size: 100% 100%;
      & > img {
        top: 85px;
        left: 50%;
        transform: translateX(-50%);
      }
    }
    &.business2 {
      margin-top: 266px;
    }
    &.business3 {
      margin-top: 26px;
      background: url('@/assets/images/business/business3-bg.png') no-repeat;
      background-size: 100% 100%;
    }
    &.business4 {
      margin-top: 37px;
    }
    &.business5 {
      margin-top: 26px;
      background: url('@/assets/images/business/business5-bg.png') no-repeat;
      background-size: 100% 100%;
    }
    &.business6 {
      margin-top: 50px;
      & > div {
        width: 1014px;
        & > span {
          &:nth-child(1) {
            font-size: 36px;
            font-family:
              PingFangSC-Semibold,
              PingFang SC;
            font-weight: 600;
            color: #4a7ec3;
            line-height: 30px;
          }
          &:nth-child(2) {
            font-size: 20px;
            font-family:
              PingFangSC-Regular,
              PingFang SC;
            font-weight: 400;
            color: #4a7ec3;
            line-height: 28px;
            margin-top: 8px;
            margin-bottom: 6px;
          }
        }
      }
    }
    &.business7 {
      margin-top: 42px;
    }
    &.business8 {
      margin-top: 32px;
    }
  }

  footer {
    height: 74px;
    background: #333333;
    margin-top: 40px;

    > span,
    > span a {
      font-size: 12px;
      font-family:
        PingFangSC-Regular,
        PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 17px;

      & .link {
        color: #65c4ff;
        text-decoration: underline;
      }
    }
  }
}

.my-el-menu {
  --el-menu-bg-color: none;
  --el-menu-text-color: #ffffff;
  --el-menu-hover-bg-color: none;
  --el-menu-active-color: #ffffff;
  --el-menu-hover-text-color: #ffffff;
  --el-bg-color-overlay: none;
  --el-menu-hover-text-color: #ffffff;
}

:deep(.el-menu) {
  border: 0 !important;
  height: 50px;
  margin-left: 40px;
}
</style>
